import { Component, ElementRef, Renderer2 } from '@angular/core';
import { ApesField } from '@shared/ui-zorro/src/types/apes-field';
import { ApiService } from '@core/services/http/api.service';
import { Events } from '@core/services/events/Events';
import { ExpressionService } from '@core/services/expression/ExpressionService';
import { SubjectService } from '@core/services/events/subject.service';
import { getO } from '../../../../utils/utils';
import { toBoolean } from '@shared/apes/core';
import { ApesDrawerCustomComponent } from '@shared/ui-zorro';
import { ApesDrawerService } from '@shared/apes/drawer';

@Component({
  selector: 'formly-field-customCard-drawer',
  template: `
    <apes-custom-card [formControl]="formControl"
                      [formlyAttributes]="field"
                      [params]="to"
                      [clickBody]="true"
                      [ctx]="formState">
      <ng-container *ngFor="let item of drawerItem;">
        <div class="customCard-drawer">
          <div class="customCard-drawer-text" (click)="openComponent(item)">
            {{getTitle(item)}}
          </div>
          <div *ngIf="item.hasOwnProperty('showHidden') && getTitle(item) != ''" class="drawer-showHidden-icon"
               (click)="openShowHidden(item)">
            <i *ngIf="!item.showHidden" apes-icon apesType="eye-invisible"></i>
            <i *ngIf="item.showHidden" apes-icon apesType="eye"></i>
          </div>
        </div>
      </ng-container>
    </apes-custom-card>
  `,
  styles: [`
    .customCard-drawer {
      display: flex;
      justify-content: start;
      line-height: 1.3;
    }

    .customCard-drawer-text {
      color: #0589DD;
      cursor: pointer;
    }

    .customCard-drawer-text:hover {
      color: #4d76b3;
    }

    .customCard-drawer .drawer-showHidden-icon {
      display: inline-block;
      margin-left: 8px;
      cursor: pointer;
      position: relative;
      top: 2px;
    }
  `],
})
export class FormlyFieldCustomCardDrawer extends ApesField {

  drawerItem: any[] = [];

  constructor(
    protected apiService: ApiService,
    protected events: Events,
    protected expressionService: ExpressionService,
    protected subject: SubjectService,
    protected elementRef: ElementRef,
    protected renderer: Renderer2,
    protected drawerService: ApesDrawerService,
  ) {
    super(apiService, events, expressionService, subject);
  }

  ngOnInit(): void {
    this.addEventListener(this.elementRef, this.renderer);

    this.initData(this.to);
  }

  initData(param) {
    if (param.hasOwnProperty('options')) {
      let options = getO(param.options);
      console.log(options);
      options.forEach((option)=>{
        if(option.hasOwnProperty('showHidden')){
          option.showHidden = toBoolean(option.showHidden);
        }
      })
      this.drawerItem = options;
    }
  }

  getTitle(param) {
    let show = '';
    if (param.valueFormatter) {
      let value = this.formatter(param.valueFormatter);
      show = this.filterField(value, param);
    }
    return show;
  }

  formatter(expression: string) {
    return this.expressionService.evaluate(expression, {
      context: this.formState,
      model: this.formState.model,
    });
  }

  filterField(value: any, param) {
    if (value) {
      if (param.hasOwnProperty('showHidden') && !param.showHidden) {
        let hiddenRegExp = param.hiddenRegExp;
        if (hiddenRegExp) {
          let replaceValue = param.replaceValue;
          let regExpValue = this.formatter(param.valueFormatter);
          // tslint:disable-next-line:no-eval
          hiddenRegExp = eval(hiddenRegExp);
          return regExpValue.replace(hiddenRegExp, replaceValue);
        } else {
          return '****';
        }
      } else {
        return this.formatter(param.valueFormatter);
      }
    } else {
      return '';
    }
  }

  openComponent(param): void {
    let title = param.title ? param.title : '';
    let key = param.showField;
    let value = this.formState.model[key];
    const drawerRef = this.drawerService.create<ApesDrawerCustomComponent, { formId: string, api: string, value: any; title: any, conditionModel: any }, string>({
      apesTitle: title,
      apesContent: ApesDrawerCustomComponent,
      apesWidth: param.width ? param.width : '600px',
      apesContentParams: {
        formId: param.formId,
        api: param.api,
        title: title,
        value: value,
        conditionModel: this.formState.model,
      },
    });
    drawerRef.afterOpen.subscribe(() => {
      console.log('Drawer(Component) open');
    });

    drawerRef.afterClose.subscribe(data => {
      if (typeof data === 'string') {

      }
    });
  }

  openShowHidden(param) {
    param.showHidden = !param.showHidden;
  }

}
